<template>
  <el-dialog title="分配角色" :visible="value" width="50%" @close="selectedRoleId = ''">
    <div>
      <p>当前的用户：{{ userData.username }}</p>
      <p>当前的角色：{{ userData.role_name }}</p>
      <p>分配新角色：
        <el-select v-model="selectedRoleId" placeholder="请选择">
          <el-option v-for="item in $store.state.roles.rolesList" :key="item.id" :label="item.roleName" :value="item.id" />
        </el-select>
      </p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('changeVisible',false)">取 消</el-button>
      <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateUserRoles } from '@/api/user.js'

export default {
  name: 'SetRoleDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 需要被分配角色的用户信息
      userData: {},
      // 已选中的角色Id值
      selectedRoleId: ''
    }
  },
  created() {},
  methods: {
    getData(obj) {
      this.userData = obj
      this.$emit('changeVisible', true)
      // 获取角色列表
      this.$store.dispatch('roles/getRolesList')
    },
    // 点击按钮，分配角色
    async saveRoleInfo() {
      // 判断是否选择了选项
      // 没有选择
      if (!this.selectedRoleId) this.$message.error('请选择需要分配的角色')
      // 选择了,发起分配用户角色请求
      try {
        await updateUserRoles(this.userData.id, this.selectedRoleId)
        // console.log(res)
        this.$message.success('分配角色成功')
        // 重新获取用户列表
        this.$parent.getUserList()
        // this.getUserList()
        // this.setRoleDialogVisible = false
        this.$emit('changeVisible', false)
      } catch (err) {
        this.$message.error('分配角色失败')
      }
    }
  }
}
</script>

<style lang='less' scoped>
</style>
